@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#fatch {
    width: 100%;
    height: 100%;
    position: relative;
    .son {
        width: 96%;
        left: 2%;
        top: 1%;
        height: 98%;
        z-index: 1;
        position: absolute;
        img {
            width: 100%;
            height: 100%;
            user-select:none;
        }
    }
    .son1 {
        width: 60%;
        height: r(25);
        z-index: 1;
        position: absolute;
        top: 10%;
        left: 30%;
        img {
            width: 70%;
            user-select:none;
        }
    }
    .son2 {
        position: absolute;
        top: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
            user-select:none;
        }
    }
    .son3 {
        position: absolute;
        top: r(180);
        left: r(26);
        width: r(700);
        margin-top: r(56);
        img {
            width: 100%;
            user-select:none;
        }
    }
    .pand {
        position: absolute;
        top: r(326);
        width: r(450);
        left: r(130);
        margin-top: r(60);
        img {
            width: 100%;
            user-select:none;
        }
    }
    .mony {
        position: absolute;
        bottom: r(270);
        width: r(750);
        img {
            width: 100%;
            user-select:none;
        }
    }
    .bottom {
        position: absolute;
        top: r(873);
        left: r(154);
        color: #fff;
        text-align: center;
        .top {
            font-size: r(30);
            font-weight: 600;
        }
        .bootom {
            font-size: r(34);
            font-weight: 600;
        }
    }
    .di {
        width: r(480);
        height: r(65);
        position: absolute;
        top: r(1000);
        left: r(150);
        z-index:3;
        .Left {
            float: left;
            width: r(227);
            height: r(65);
            line-height: r(65);
            text-align: center;
            color: #FFD977;
            border: 1px solid #FFD977;
            cursor: pointer;
        }
        .Right {
            float: left;
            width: r(227);
            height: r(67);
            margin-left: r(12);
            line-height: r(65);
            text-align: center;
            background: #FFD977;
            color: #a20500;
            cursor: pointer;
        }
    }
    .father {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 4;
        display: none;
        .red {
            width: r(668);
            height: r(877);
            background: #d31b0d;
            margin-top: r(100);
            margin-left: r(42);
            text-align: center;
            padding-top: r(130);
            .ziz {
                width: r(481);
                height: r(70);
                line-height: r(70);
                color: #fff;
                margin: 0 auto;
                border-bottom: 4px double #fff;
                border-top: 4px double #fff;
            }
            .ma {
                width: r(340);
                height: r(340);
                margin: 0 auto;
                margin-top: r(45);
                img {
                    width: 100%;
                    user-select:none;
                }
            }
            p {
                color: #fff;
                font-size: r(20);
                margin-bottom: r(10);
                text-align: center;
            }
            .frist {
                margin-top: r(44);
            }
            .close {
                width: r(226);
                height: r(66);
                line-height: r(66);
                margin: 0 auto;
                margin-bottom: r(64);
                margin-top: r(42);
                border: 1px solid #f4e398;
                color: #f4e398;
            }
        }
    }
    .tou {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 4;
        display: none;
        .red {
            width: r(668);
            height: r(877);
            background: #d31b0d;
            margin-top: r(100);
            margin-left: r(42);
            text-align: center;
            padding-top: r(130);
        }
        .ziz {
            width: r(481);
            height: r(70);
            line-height: r(70);
            color: #fff;
            margin: 0 auto;
            border-bottom: 4px double #fff;
            border-top: 4px double #fff;
        }
        .zhent {
            width: r(429);
            height: r(236);
            margin: 0 auto;
            margin-top: r(16);
            img {
                width: 100%;
                user-select:none;
            }
        }
        .jies {
            width: r(560);
            margin: 0 auto;
            font-size: r(20);
            text-align: left;
            text-align: justify;
            text-justify: inter-ideograph;
            color: #fff;
            margin-top: r(58);
            p {
                font-size: r(22);
                margin-top: r(18);
            }
        }
        .close {
            width: r(226);
            height: r(66);
            line-height: r(66);
            margin: 0 auto;
            margin-bottom: r(64);
            margin-top: r(80);
            border: 1px solid #f4e398;
            color: #f4e398;
        }
    }
    #game{
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 4;
        display: none;
        .some{
            width:r(256);
            height:r(177);
            left:r(50);
            position:absolute;
            transition:all linear;
            img{
                width:100%;
                user-select:none;
            }
            .zhengtou{
                width: r(185);
                position: absolute;
                top:r(60);
                img{
                    width: 100%;
                    user-select:none;
                }
            }
        }
        .bg{
            width: 9999px;
            height: r(1500);
            overflow: hidden;
            background:url(../img/bg1.png) no-repeat 0 0;
            background-size: 100% 100%;
        }
        .bg1{
            width: r(750);
            float: left;
            margin-top: r(810);
            img{
               width: 100%;
               height: 100%;
               user-select:none;
            }
            .xingxing{
                width: 100%;
                position: absolute;
                top: r(20);
                img{
                    width: 100%;
                    user-select:none;
                }
            }
        }
        .bg2{
            width: r(700);
            float: left;
            margin-top: r(700);
            img{
                width: 80%;
                user-select:none;
            }
            .xingxing{
                width: 100%;
                position: absolute;
                top: r(80);
                img{
                    width: 100%;
                    user-select:none;
                }
            }
        }
        .power{
            width: r(514);
            height: r(44);
            border-radius:r(20) ;
            position: absolute;
            top: r(1100);
            left: r(130);
            z-index: 4;
            overflow: hidden;
            img{
                width: 100%;
                user-select:none;
            }
        }
        .power2{
            width: r(514);
            height: r(44);
            position: absolute;
            top: 0;
            left:0%;
            z-index: -1;
            img{
                width: 100%;
                user-select:none;
            }
        }
        .zhe{
            width: r(534);
            height: r(44);
            position: absolute;
            top: 0;
            z-index: -1;
            background: #150303;
        }
        .dian{
            width: r(361);
            height: r(159);
            position: absolute;
            top: 30%;
            left: 30%;
            z-index: 6;
            img{
                width: 100%;
                user-select:none;
            }
        }
        .dianji{
            width: r(361);
            height: r(159);
            position: absolute;
            top: 30%;
            left: 30%;
            z-index: 6;
            display: none;
            img{
                width: 100%;
                user-select:none;
            }
        }
    }
    .jieguo{
        width: 100%;
        height: 100%;
        position: absolute;
        background:rgba(0, 0, 0, .6) ;
        z-index: 5;
        display: none;
        .chuan{
            width: r(640);
            height: r(448);
            margin: 0 auto;
            margin-top: r(319);
            background: url(../img/game/result_bg.jpg) no-repeat 0 0;
            background-size:100% 100% ;
            .tubiao{
                width: r(88);
                height: r(88);
                margin-left: r(550);
                padding-top: r(99);
                img{
                    width: 100%;
                    user-select:none;
                }
            }
            .shuzi{
                width: r(500);
                height: r(100);
                margin: 0 auto;
                text-align: center;
                span{
                    color: #f9ed5f;
                    display: inline-block;
                    font-size: r(38);
                    font-size: r(60);
                }
                span:nth-child(1){
                    margin-right: r(120);
                }
            }
            p{
                width: r(600);
                margin: 0 auto;
                text-align: center;
                font-size: r(26);
                color: #fff;
                margin-top: r(40);
            }
            .bottom{
                width: r(481);
                height: r(64);
                margin: 0 auto;
                margin-top: r(238);
                text-align: center;
                .again{
                    width: r(227);
                    height: r(54);
                    line-height: r(54);
                    margin-right: r(12);
                    float: left;
                    border:solid 3px #f4e398 ;
                }
                .zhoujian{
                    width: r(227);
                    height: r(64);
                    line-height: r(64);
                    float: left;
                    background: #f4e398;
                    color: #a20500;
                }
            }
        }
    }
    .jiang{
        width: 100%;
        height: r(1350);
        background: url(../img/index/index_bg.jpg) no-repeat 0 0;
        background-size:100% 100% ;
    }
    .bian2 {
        position: absolute;
        width: r(450);
        height: r(486);
        top: 25%;
        left: 21%;
        z-index: 9;
        text-align: center;
        display: none;
        p {
            z-index: 1;
            color: #ffd977;
            font-size: 110%;
        }
        .zit{
            font-size: r(19);
            margin-top: r(18);
            color: #fff;
            span{
                color: #FFD977;
                font-size: r(26);
                font-weight: 600;
            }
        }
        .honb{
            width: r(311);
            height: r(182);
            margin: 0 auto;
            margin-top: r(86);
            img{
                width: 100%;
                user-select:none;
            }
        }
        .jihui{
            color: #FFFFFF;
            font-size: r(28) ;
            margin-top: r(90);
        }
        .jihui2{
            color: #FFFFFF;
            font-size: r(28) ;
        }
    }
}
.guiz{
    position: absolute;
    top: 0;
    z-index: 8;
    overflow-y:  scroll;
    display: none;
    img{
        width: 100%;
        user-select:none;
    }
    .cha{
        position: absolute;
        top: r(30);
        right: r(50);
        width: r(50);
        height: r(50);
        img{
            width: 100%;
            user-select:none;
        }
    }
}
